<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>紫色留言本</title>
  <style>
    body { font-family: Georgia; background: #f3e5f5; padding: 20px; }
    h1 { text-align: center; color: #6a1b9a; }
    .input { display: flex; flex-direction: column; align-items: center; margin: 20px; }
    input, textarea { width: 60%; padding: 10px; margin: 5px 0; border-radius: 6px; border: 1px solid #ab47bc; }
    button { background: #8e24aa; color: #fff; border: none; padding: 10px 25px; border-radius: 6px; margin-top: 5px; }
    .board { max-width: 700px; margin: auto; margin-top: 20px; }
    .message { background: #ede7f6; border-left: 6px solid #8e24aa; padding: 10px 15px; margin: 8px 0; border-radius: 6px; }
    .author { font-weight: bold; color: #6a1b9a; }
    .message button { float: right; background: #d81b60; border: none; color: #fff; padding: 2px 6px; border-radius: 4px; }
  </style>
</head>
<body>
  <h1>好友留言板</h1>
  <div class="input">
    <input id="name" placeholder="昵称">
    <textarea id="msg" rows="3" placeholder="写下留言..."></textarea>
    <button onclick="add()">发布</button>
  </div>
  <div id="board" class="board"></div>
<script>
  const key4="purpleBoard"; let list=JSON.parse(localStorage.getItem(key4))||[];
  function render(){let b=document.getElementById("board");b.innerHTML="";list.forEach((m,i)=>{let d=document.createElement("div");d.className="message";d.innerHTML=`<span class="author">${m.name}:</span> ${m.text} <button onclick="del(${i})">X</button>`;b.appendChild(d);});}
  function add(){let n=document.getElementById("name"),t=document.getElementById("msg");if(n.value.trim()&&t.value.trim()){list.push({name:n.value.trim(),text:t.value.trim()});localStorage.setItem(key4,JSON.stringify(list));n.value="";t.value="";render();}}
  function del(i){list.splice(i,1);localStorage.setItem(key4,JSON.stringify(list));render();}
  render();
</script>
</body>
</html>
